<template>
    <div class="lyric_box" @mouseenter="change_close" @mouseleave="change_close">
        <div class="bar_ctrl">
            <img src="../../../assets/M_redio/close.png" @click="togglechange"  v-show="isclose" alt="">
        </div>
        <scroll class="lyric_content" ref="scroll">
            <ul>
                <li v-for="(item,i) in lyriclist" :key="i">{{ item.lyric[1]}}</li>
            </ul>
        </scroll>
    </div>
</template>

<script>
import scroll from './Scroll.vue';

export class lyricItem{
  constructor(time,lyric){
    this.time = time;
    this.lyric = lyric;
  }
}

export default {
    data() {
        return {
            isclose: false,
            lyriclist: [], // 歌词
            lyricCont: [], // 单句歌词
            lyricIndex: -1,
            maxIndex: 0,
        }
    },
    watch:{
        lyric(){
            this.lyricIndex=-1;
            this.maxIndex=0;
            this.getlyriclist(this.lyric);
            // console.log(this.lyriclist);
        }
    },
    methods: {
        getlyriclist(lyric){
            var RegExp=/\[(\d*:\d*\.\d*)/; //[00:00.10
            var str=[],timeArr=[],lyricArr=[];  // 全部歌词数组， 歌词时间， 单句歌词， 合并后的数组

            /* 将歌词转换成数组 */
            str=lyric.split('\n');
            
            /* 处理歌词 */
            str.forEach(item => {
                /* 获取歌词 */
                var lrc= item.split(']');
                // console.log(lrc);

                /* 处理时间 */
                var resTime = RegExp.exec(item);
                if(resTime !== ''&& resTime !== null){
                    lyricArr.push(lrc);
                    
                    var resTime2 = resTime[1].split(':');
                    var minite = parseInt(resTime2[0])*60; // 分
                    var second = parseFloat(resTime2[1]); // 秒
                    var time=parseFloat(Number(minite+second).toFixed(2)); //toFixed返回值是String
                    timeArr.push(time);
                };
            });

            /* 合并歌词 */
            for( var i=0; i<timeArr.length; i++){
                // var obj=new lyricItem(timeArr[i],lyricArr[i]);
                // this.lyricCont.push(obj);
                this.lyricCont = { 
                    time: timeArr[i], 
                    lyric: lyricArr[i],
                }
                this.lyriclist.push(this.lyricCont);
            }

            /* 排序 */
            // this.lyriclist = this.lyricCont.sort((a,b)=>{
            //     return a.time-b.time;
            // });
            // this.length = this.lyriclist.length;
        },

        Lyricscroll(time=0){
            if( this.lyricIndex > this.lyriclist.length-2) return;
            if( time >= this.lyriclist[this.lyricIndex+1].time ){
                this.lyricIndex++;
                this.$refs.scroll.scrollTo(0,-30*this.lyricIndex,2000);
            }
        },

        /* 切换歌词 */
        togglechange(){
            this.$emit('change_lyric');
            // console.log(this.lyric);
        },

        /* 切换是否关闭 */
        change_close(){
            this.isclose = !this.isclose;
        }
    },
    components:{
        scroll,
    },
    props: ['lyric'],
}
</script>

<style>
.lyric_box{ 
    width: 600px; 
    border-radius: 10px; 
    padding-bottom: 10px;
} /*  */

.lyric_box:hover{ 
    background-color: rgba(255, 255, 255, 50%);
}
.bar_ctrl{
    padding-top: 5px;
    padding-left: 5px;
    height: 30px;
}

.bar_ctrl img{ 
    width: 20px; 
    height: 20px; 
    cursor: pointer;
}

.lyric_content{
    height: 50px;
    overflow: hidden;
}

.lyric_content li{ 
    list-style: none; 
    text-align: center; 
    line-height: 50px; 
    color: #b82525; 
    font-size: 26px; 
    font-weight: 400; 
}
</style>